<template>
	<view class="container">

		<view class="shijian">
			<h1 >
				时间：{{data.year}}年{{data.mouth}}月{{data.day}}日
				
				</h1>
				<view class="xiugai"  @click="shijians">
					点击修改
				</view>
		</view>
		<h2>标题：丨 {{data.title}}</h2>
		<view class="img">
			<image :src="img" mode="heightFix"></image>
		</view>
		<view class="neirong">
			内容：{{data.contain}}
		</view>
		<view class="relax">
			标签：
			<view v-for="(item,index) in data.relationship" :key="index" class="item">
				{{item}}
			</view>
		</view>
		<view class="dengji">
			等级：{{data.dengji}}品
		</view>
		<text selectable>{{img}}</text>
		<!-- 显示居中弹窗 筛选-->
		<!-- 普通弹窗 添加事件-->
		<uni-popup ref="shijians" background-color="#fff" @change="change" class="fuchuang">
			<h3>修改事件：</h3>
		
			<uni-notice-bar single text="修改事件前请确保小说和人物已添加,否则输入无效!" />
		
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<form>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="shijian.year"
						placeholder="年份:"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="shijian.mouth"
						placeholder="月份:"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="shijian.day"
						placeholder="日:"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.title"
						placeholder="标题:"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.contain"
						placeholder="内容:"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.temp"
						placeholder="关联人物['-'隔开]:"></uni-easyinput>
					<uni-easyinput type="number" class="uni-mt-5" trim="all" v-model.number="shijian.dengji"
						placeholder="等级:[数字1-10]"></uni-easyinput>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.image"
						placeholder="图片连接:"></uni-easyinput>
					<button @click="addshijianimage">添加事件图片</button>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="shijian.novel"
						placeholder="率属小说:"></uni-easyinput>
		
					<button type="button" @click="submitForm">提交</button>
		
				</form>
				
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: 'https://wx4.sinaimg.cn/mw2000/0085hC9mly8gyel2f16yoj30hs0hsmxz.jpg',
				data: {},
				shijian: {
					title: '',
					year: null,
					mouth: null,
					day: null,
					dengji: null,
					contain: '',
					relationship: [], //关联人物
					image: '', //图片连接
					id: null,
					temp: '',
					novel: ''
				},
			}
		},
		onLoad: function(options) {
			var a = JSON.parse(decodeURIComponent(options.a));
			console.log(a); // 输出变量a的JSON数据
			this.data = a;
           
			this.shijian = a;
			console.log(this.shijian);

			 var str = a.image;

			 // 正则表达式，匹配常见的图片格式结尾
			 var regex = /\.(jpg|jpeg|png|gif|bmp)$/i;

			 // 使用test方法检测字符串是否以图片格式结尾
			 var isImage = regex.test(str);


			if(isImage){
			 this.img = str;
			}

		},
		methods: {
			addshijianimage() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				let that = this;
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量，默认为 9
					sizeType: ['original', 'compressed'], // 可以指定选择原图或压缩图，默认为 ['original', 'compressed']
					sourceType: ['album', 'camera'], // 可以指定选择图片的来源，默认为 ['album', 'camera']
					success: function(res) {
						// 选择图片成功
						let tempFilePaths = res.tempFilePaths; // 图片的临时文件路径数组
						console.log('选择的图片路径:', tempFilePaths);
						const name = res.tempFiles[0].name // 选择图片的名称.后缀名
						console.log(name);
						uniCloud.uploadFile({
							filePath: tempFilePaths[0],
							cloudPath: Date.now() + "-" + name, // 这样写上传的图片后缀名就是原本的后缀名（也就是我最终想实现的效果）
						}).then(res => {
							console.log(res.fileID)
							that.shijian.image = res.fileID;
							uni.hideLoading()
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							});
			
						})
					},
					fail: function(err) {
						// 选择图片失败
						console.error('选择图片失败:', err);
					}
				});
			},
			
			shijians() {
				this.$refs.shijians.open('center')
			
			},
			submitForm(){
				let that = this;
				this.shijian.id = this.shijian.year.toString() + this.shijian.mouth.toString() + this.shijian.day.toString();
				console.log(this.shijian.title);
				this.shijian.relationship = this.shijian.temp.split("-");
				console.log(this.shijian);
				let obj = this.shijian;
				let novel = this.shijian.novel;
				
				uni.showLoading({
					title: '提交中...',
					mask: true
				});

				uniCloud.callFunction({
					name: "xiugaishijian",
					data: obj
				}).then(res => {
					console.log(res);
					that.$refs.shijians.close('center')
					uni.hideLoading();
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
				
				})
				
				
				
				
				
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-top: 20px;
		font-family: Arial, "kaiti", Helvetica, sans-serif;

		.img {
			height: 150px;
			width: 100%;
			background-color: palegoldenrod;
			overflow: hidden;
			text-align: center;

			image {
				height: 100%;

			}
		}

		.shijian{
			position: relative;
			h1 {
				padding: 0 20px;
			}
			.xiugai{
				
				position: absolute;
				top: 0px;
				right: 10px;
				font-size: 15px;
				color: green;
				text-decoration: underline;
			}
		}

		h2 {

			margin-left: 20px;
			margin-top: 15px;
			color: red;
			width: 80%;
			border-bottom: 1px solid #000;
			margin-bottom: 10px;

		}

		.neirong {
			padding: 20px;
			margin-top: 15px;
			border: 1px solid #000;
			font-weight: 800;

		}

		.dengji {
			padding: 0 20px;
			margin-top: 15px;
			background-color: yellow;
		}

		.relax {
			margin-top: 15px;
			padding: 0 20px;
			display: flex;
			flex-wrap: wrap;

			.item {

				background-color: limegreen;
				width: 13%;
				border-radius: 10px;
				border: 1px solid #000;
				text-align: center;
			}
		}
		
	}
	
</style>